<template>
  <div class="index">
    <el-container>
      <el-header height="68px">
        <m-header></m-header>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <m-aside></m-aside>
        </el-aside>
        <el-main>
          <div class="agent">
            <div class="title">加盟代理</div>
            <div class="content">
              <div class="link">
                <span class="link-title">用户推广链接：</span>
                <a class="links" :href=link target="_blank">{{link}}</a>
                <el-button type="primary" size="medium" 
                  v-clipboard:copy="link"
                  v-clipboard:success="onCopy"
                  v-clipboard:error="onError"
                >复制链接</el-button>
                <el-button type="success" size="medium" @click="qrcodeScan">查看二维码</el-button>
                <div id="qrcode" ref="qrcode"></div>
              </div>
              <div class="overview">
                <el-row>
                  <el-col :span="4">
                    <div class="grid-content bg-purple-left">
                      <p class="label">一级</p>
                    </div>
                  </el-col>
                  <el-col :span="5">
                    <div class="grid-content bg-purple-left">
                      <p class="number">{{userCountLevel1}} 人</p>
                      <p class="text">用户数量</p>
                    </div>
                  </el-col>
                  <el-col :span="5">
                    <div class="grid-content bg-purple-left">
                      <p class="number">{{sumSendFeeLevel1}} 条</p>
                      <p class="text">已发闪信条数</p>
                    </div>
                  </el-col>
                  <el-col :span="5">
                    <div class="grid-content bg-purple-light">
                      <p class="number">{{msgRebateLevel1}} 元 / 条</p>
                      <p class="text">佣金返利比例</p>
                    </div>
                  </el-col>
                  <el-col :span="5">
                    <div class="grid-content bg-purple">
                      <p class="number">{{sumRebateFeeLevel1}} 元</p>
                      <p class="text">返利金额</p>
                    </div>
                  </el-col>
                </el-row>
                <div class="total">
                  <span>总返利金额：</span>
                  <span class="total-desc">{{sumRebateFee}}</span>
                  <span class="mar-left">已提现金额：</span>
                  <span class="total-desc">{{sumWithdrawalAmount}}</span>
                  <span class="mar-left">当前可提金额：</span>
                  <span class="total-desc">{{sumMentionAmount}}</span>
                </div>
              </div>
              <div class="record">提现记录：</div>
              <el-table
                :data="tableData"
                border
                :cell-style="{'text-align':'center'}"
                :header-cell-style="{
                  'background-color': '#f5f5f5',
                  'color':'#555',
                  'text-align':'center'
                }"
                style="width: 100%"
              >
                <el-table-column prop="amount" :formatter="dateTotal" label="提现金额(元)"></el-table-column>
                <el-table-column prop="createdDate" label="提现时间"></el-table-column>
                <el-table-column prop="journalStatus" :formatter="dateStatus" label="提现状态"></el-table-column>
              </el-table>
              <div class="block" v-if="total>10">
                <el-pagination
                  background
                  @current-change="handleCurrentChange"
                  layout="prev, pager, next"
                  :page-size="pagesize"
                  :current-page="currentPage"
                  :total="total"
                ></el-pagination>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import QRCode from "qrcodejs2";
import { getCookie } from "./until/index";
function init() {
  this.$ajax.get("getAgentSummaryReport.ashx?userId=" +getCookie("userid") +"&token=" +getCookie("token") )
    .then(res => {

      if (res.data.code == 200) {
        var data = res.data.data;
        this.tableData = data.cashJournalList;
        this.link =this.url+ data.refCode
        this.userCountLevel1 = data.userCountLevel1; //一级用户数量
        this.sumSendFeeLevel1 = data.sumSendFeeLevel1 //一级已发闪信数量
        this.msgRebateLevel1 = data.msgRebateLevel1 //一级佣金返利比例
        this.sumRebateFeeLevel1 = data.sumRebateFeeLevel1 //一级返利金额
        this.sumRebateFee = data.sumRebateFee //总返利金额
        this.sumWithdrawalAmount = data.sumWithdrawalAmount //总已提现金额
        this.sumMentionAmount = data.sumRebateFee - data.sumWithdrawalAmount //可提金额

      } else {
        this.$message.error(res.data.msg);
      }
    })
    .catch(error => {
      console.log(error);
    });
}
export default {
  data() {
    return {
      pagesize: 10, //每页显示条数
      currentPage: 1, //初始页
      total: 0, //总条数
      tableData: [],
      url:'http://www.ishanxin/regist.aspx?c=',
      link:'', //推广链接
      userCountLevel1:'',
      sumSendFeeLevel1:'',
      msgRebateLevel1:'',
      sumRebateFeeLevel1:'',
      sumRebateFee:'',
      sumWithdrawalAmount:'',
      sumMentionAmount:''
    };
  },
  created() {
    init.call(this);
  },
  methods: {
    handleCurrentChange(num) {
      this.currentPage = num;
      init.call(this);
    },
    // 处理金额
    dateTotal(row, column) {
      var data = row[column.property];
      return "¥" + data;
    },
    // 处理状态
    dateStatus(row, column) {
      var data = row[column.property];
      switch (data) {
        case "0":
          return "审核中";
          break;
        case "5":
          return "  已到账";
        case "10":
          return "被驳回";
        default:
          break;
      }
    },
    // 复制成功
    onCopy(){
      this.$message({
        type:'success',
        message:'复制成功！',
      })
    },
    onError(){
      this.$message.error('复制失败');
    },
    qrcodeScan() {
      let qrcode = new QRCode("qrcode", {
        width: 120, // 二维码宽度
        height: 120, // 二维码高度
        text: this.link
      });
    }
  }
};
</script>
<style scoped>
.index {
  overflow: hidden;
}
.el-header {
  background-color: #3a4759;
  color: #fff;
}
.el-aside {
  background-color: #485668;
  color: #333;
  text-align: center;
  line-height: 200px;
  overflow: hidden;
}
.el-main {
  background-color: #f0eff5;
  color: #333;
  text-align: center;
  height: 100%;
}
.agent {
  width: 100%;
  min-height: 100vh;
}
.agent .title {
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 20px;
}
.content {
  width: 100%;
  background: #fff;
  padding: 20px;
  display: table;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.content .link{
  width: 100%;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
  text-align: left;
  position: relative;
}
.content .link .el-button{
  margin-left: 30px;
}
.content .link .link-title{
  margin-left: 30px;
  color: #333;
  font-size: 14px;
}
.content .link .links{
  margin:0 30px 0;
}
#qrcode{
  position:absolute;
  right: 20%;
  top: 0px;
  z-index: 99;
}
.overview {
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
}
.total{
  width: 100%;
  padding-top: 50px;

}
.total span{
  margin-left: 20px;
  color: #666;
  font-size: 14px;
  display: inline-block;
}
.total span.total-desc{
  color: #333;
  font-weight: 600;
}
.total span.mar-left{
  margin-left: 70px;
}
.el-row {
  background: #fff;
  border: 1px solid #adacac;
}
.el-col {
  border-radius: 4px;
  height: 100px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
}
.bg-purple-left {
  border-right: 1px solid #e5e5e5;
}
.grid-content {
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.grid-content p {
  text-align: center;
  margin: 0;
  line-height: 40px;
}
.grid-content .label{
  font-family: "Helvetica";
  font-weight: bold;
  font-size: 22px;
  line-height: 80px
}
.grid-content p.number {
  font-family: "Helvetica";
  font-weight: bold;
  font-size: 20px;
}
.grid-content p.text {
  font-family: "Helvetica";
  font-size: 14px;
  position: relative;
}
.record{
  width: 100%;
  text-align: left;
  padding-bottom: 20px;
  margin-left: 10px;
}
.block {
  padding: 20px;
}
</style>
  